<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Showing and Hiding with Transitions</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Showing and Hiding with Transitions</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
div.demo {
    background: #ccc;
    border: 1px solid #999;
    margin: 1em 0;
}

div.demo p {
    padding: 1em;
    zoom:1;
}

</style>
<div class="intro">
    <p>This example shows how to show and hide Node instances.</p>
</div>

<div class="example">
<button id="hide">hide</button>
<button id="show">show</button>

<div class="demo"><p>lorem ipsum dolor sit</p></div>

<script type="text/javascript">
YUI().use('transition', 'node-event-delegate', function(Y) {
    Y.delegate('click', function(e) {
        var buttonID = e.currentTarget.get('id'),
            node = Y.one('.demo');
            
        if (buttonID === 'show') {
            node.show(true);
        } else if (buttonID == 'hide') {
            node.hide(true);
        }

    }, document, 'button');
});
</script>

</div>

<h2>Showing a Node</h2>
<p>The view of a Node instance can be transitioned by passing <code>true</code> to the <code>show</code> and <code>hide</code> methods.</p>

<pre class="code prettyprint">Y.one(&#x27;.demo&#x27;).show(true);</pre>


<h2>Hiding a Node</h2>
<p>The opposite of <code>show</code>, the <code>hide</code> method sets the node's CSS <code>display</code> property to <code>none</code>.</p>

<pre class="code prettyprint">Y.one(&#x27;.demo&#x27;).hide(true);</pre>


<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;button id=&quot;hide&quot;&gt;hide&lt;&#x2F;button&gt;
&lt;button id=&quot;show&quot;&gt;show&lt;&#x2F;button&gt;

&lt;div class=&quot;demo&quot;&gt;&lt;p&gt;lorem ipsum dolor sit&lt;&#x2F;p&gt;&lt;&#x2F;div&gt;

&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
YUI().use(&#x27;transition&#x27;, &#x27;node-event-delegate&#x27;, function(Y) {
    Y.delegate(&#x27;click&#x27;, function(e) {
        var buttonID = e.currentTarget.get(&#x27;id&#x27;),
            node = Y.one(&#x27;.demo&#x27;);
            
        if (buttonID === &#x27;show&#x27;) {
            node.show(true);
        } else if (buttonID == &#x27;hide&#x27;) {
            node.hide(true);
        }

    }, document, &#x27;button&#x27;);
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Demonstrates the basic usage of Transitions.">
                                        <a href="transition-basic.html">Basic Node Transitions</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Demonstrates more advanced usage of Transitions.">
                                        <a href="transition-usage.html">Using Transitions</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Demonstrates how to animate Node&#x27;s show and hide methods.">
                                        <a href="transition-view.html">Showing and Hiding with Transitions</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to create a panel that animates as it is shown and hidden">
                                        <a href="../panel/panel-animate.html">Creating an animated panel</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.">
                                        <a href="../jsonp/jsonp-gallery.html">Reusing a JSONPRequest Instance to Poll a Remote Server</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example employs AsyncQueue to incrementally construct an application interface; this illustrates the approach you&#x27;d take to allow chunked rendering of the UI in a process-intensive application.">
                                        <a href="../async-queue/queue-app.html">Building a UI with AsyncQueue</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
